<template>
	<breadCrumb ref="breadCrumb" :item="item"></breadCrumb>
	<div class="common-wrapped">
		<div class="common-content">
			<el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="账号详情" name="first">
					<div class="account-infor-wrapped">
						<span>用户头像：</span>
						<div class="account-infor-content">
							<!-- action是上传头像的接口 -->
							<el-upload class="avatar-uploader" action="http://127.0.0.1:3007/user/uploadAvatar"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="userStore.imageUrl" :src="userStore.imageUrl" class="avatar" />
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>用户账号：</span>
						<div class="account-infor-content">
							<el-input v-model="userData.account" disabled></el-input>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>用户密码：</span>
						<div class="account-infor-content">
							<el-button type="primary" @click="openChangePassword">修改密码</el-button>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>用户姓名：</span>
						<div class="account-infor-content">
							<el-input v-model="userData.name"></el-input>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="saveName">保存</el-button>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>用户性别：</span>
						<div class="account-infor-content">
							<el-select v-model="userData.sex" placeholder="Select">
								<el-option label="男" value="男" />
								<el-option label="女" value="女" />
							</el-select>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="saveSex">保存</el-button>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>用户身份：</span>
						<div class="account-infor-content">
							<el-input v-model="userData.identity" disabled></el-input>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>用户部门：</span>
						<div class="account-infor-content">
							<el-input v-model="userData.department" disabled></el-input>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>用户邮箱：</span>
						<div class="account-infor-content">
							<el-input v-model="userData.email"></el-input>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="saveEmail">保存</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="公司信息" name="second">
					<div class="account-infor-wrapped">
						<span>公司名称：</span>
						<div class="account-infor-content">
							<el-input v-model="companyName"></el-input>
						</div>
						<div class="account-save-button">
							<el-button type="primary" @click="changeCompanyname">保存</el-button>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>公司介绍：</span>
						<div class="account-infor-content">
							<el-button type="success" @click="openEditor(1)">编辑公司介绍</el-button>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>公司架构：</span>
						<div class="account-infor-content">
							<el-button type="success" @click="openEditor(2)">编辑公司架构</el-button>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>公司战略：</span>
						<div class="account-infor-content">
							<el-button type="success" @click="openEditor(3)">编辑公司战略</el-button>
						</div>
					</div>
					<div class="account-infor-wrapped">
						<span>公司高层：</span>
						<div class="account-infor-content">
							<el-button type="success" @click="openEditor(4)">编辑公司高层</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="首页管理" name="third">
					<div class="home-wrapped">
						<!-- 提示 -->
						<div class="tips">
							<span>提示：点击图片框进行切换首页轮播图</span>
						</div>
						<!-- 轮播图 -->
						<div class="swiper-wrapped" v-for="(item,index) in swiperData" :key="index">
							<div class="swiper-name">轮播图{{index+1}}:&nbsp;&nbsp;</div>
							<el-upload class="avatar-uploader" action="http://127.0.0.1:3007/set/uploadSwiper"
								:show-file-list="false" :on-success="handleSwiperSuccess"
								:before-upload="beforeAvatarUpload" :data='item'>
								<template #trigger>
									<img v-if="imageUrl" :src="imageUrl[index]" class="swiper" />
									<img src="@/assets/雪碧图.png" alt="" v-else />
								</template>
							</el-upload>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="其他设置" name="fourth">
					<div class="other-set">
						<div class="department-set">
							<span>部门设置</span>
							<el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false"
								@close="handleClose(tag)">
								{{ tag }}
							</el-tag>
							<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
								@keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
							<el-button v-else class="button-new-tag" size="small" @click="showInput">
								添加部门
							</el-button>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
	<!-- 修改密码弹窗 -->
	<change ref="changeP"></change>

	<editor ref="editorP"></editor>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, nextTick, ref, toRaw } from 'vue';
	import breadCrumb from '@/components/bread_crumb.vue'


	import { ElMessage } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'

	import type { UploadProps, InputInstance } from 'element-plus'
	import { bind } from '@/api/userinfo.js'

	import { async } from 'fast-glob';
	import change from './components/change_password.vue'

	import { changeName, changeSex, changeEmail, getUserInfo } from '@/api/userinfo.js'
	import editor from './components/editor.vue'
	import { getCompanyName, changeCompanyName, getAllSwiper, setDepartment, getDepartment } from '@/api/setting.js'
	import { bus } from "@/utils/mitt.js"

	import { useUserinfo } from '@/store/userinfo.js'
	const userStore = useUserinfo()

	onMounted(async () => {
		let id = localStorage.getItem('id')
		const res = await getUserInfo(id)
		userData.account = res.account
		userData.name = res.name
		userData.sex = res.sex
		userData.identity = res.identity
		userData.department = res.department
		userData.email = res.email
	})


	const activeName = ref('first')

	interface userData {
		account : number,
		name : string,
		sex : string,
		identity : string,
		department : string,
		email : string
	}

	const userData : userData = reactive({
		account: '',
		name: '',
		sex: '',
		identity: '',
		department: '',
		email: ''
	})

	const changeP = ref()

	const breadcrumb = ref()

	const item = ref({
		first: '系统设置',
	})


	// 上传头像
	// 头像上传成功的函数response
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
		if (response.status == 0) {
			userStore.$patch({
				imageUrl: response.url
			})
			ElMessage({
				message: '更新头像成功',
				type: 'success',
			}),
				(async () => {
					await bind(userStore.account, response.onlyId, response.url)
				})()
		} else {
			ElMessage.error('更新头像失败，请重新上传')
		}
	}
	// 头像上传之前的函数
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
		if (rawFile.type !== 'image/jpeg') {
			ElMessage.error('头像必须JPG格式')
			return false
		} else if (rawFile.size / 1024 / 1024 > 2) {
			ElMessage.error('头像必须小于2MB!')
			return false
		}
		return true
	}

	// 账号详情信息
	const AccountDetailData = reactive({
		account: '',
		name: '',
		sex: "",
		identity: '',
		department: '',
		email: ''
	})

	// 打开密码弹窗
	const openChangePassword = () => {
		changeP.value.open()
	}
	// 保存姓名



	const saveName = async () => {
		const res = await changeName(userData.name, localStorage.getItem('id'))
		console.log(res)
		if (res.status == 0) {
			ElMessage({
				message: '修改成功',
				type: 'success',
			})
		} else {
			ElMessage.error('修改姓名失败,请重新输入')
		}
	}
	// 保存性别
	const saveSex = async () => {
		const res = await changeSex(userData.sex, localStorage.getItem('id'))
		console.log(res)
		if (res.status == 0) {
			ElMessage({
				message: '修改成功',
				type: 'success',
			})
		} else {
			ElMessage.error('修改性别失败,请重新输入')
		}
	}
	// 保存邮箱
	const saveEmail = async () => {
		const res = await changeEmail(userData.email, localStorage.getItem('id'),)
		if (res.status == 0) {
			ElMessage({
				message: '修改成功',
				type: 'success',
			})
		} else {
			ElMessage.error('修改邮箱失败,请重新输入')
		}
	}

	// 公司信息
	const companyName = ref()
	// 获取公司名字
	const getCompanyname = async () => {
		companyName.value = await getCompanyName()
	}
	getCompanyname()

	const changeCompanyname = async () => {
		const res = await changeCompanyName(companyName.value)
		if (res.status == 0) {
			ElMessage({
				message: '修改公司名称成功',
				type: 'success',
			})
		} else {
			ElMessage.error('修改公司失败，请重新输入')
		}
	}

	const editorP = ref()

	// 打开富文本
	const openEditor = (id : number) => {
		// 第一个参数是标记，第二个是传入的值
		bus.emit('editorTitle', id)
		editorP.value.open()
	}

	// 首页管理
	const swiperData = [{ name: 'swiper1' }, { name: 'swiper2' }, { name: 'swiper3' }, { name: 'swiper4' }, { name: 'swiper5' }, { name: 'swiper6' }]
	// 上传轮播图成功
	const handleSwiperSuccess : UploadProps['onSuccess'] = (response) => {
		// console.log(response)
		getAllswiper()
	}
	// 轮播图
	const imageUrl = ref()

	// 获取轮播图
	const getAllswiper = async () => {
		// console.log("获取轮播图")
		const res = await getAllSwiper()
		imageUrl.value = res
	}
	getAllswiper()

	// ---其他设置 setDepartment, getDepartment
	const inputValue = ref('')
	const dynamicTags = ref()
	const inputVisible = ref(false)
	const InputRef = ref<InputInstance>()

	// 获取部门数据
	const getdepartment = async () => {
		dynamicTags.value = await getDepartment()
	}
	getdepartment()

	// 关闭时的函数
	const handleClose = async (tag : string) => {
		dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
		const res = await setDepartment(JSON.stringify(toRaw(dynamicTags.value)))
		// console.log(res)
		if (res.status == 0) {
			ElMessage({
				message: '删除部门成功',
				type: 'success',
			})
		} else {
			ElMessage.error('删除部门失败')
		}

	}
	// 点击按钮出现输入框
	const showInput = () => {
		inputVisible.value = true
		nextTick(() => {
			InputRef.value!.input!.focus()
		})
	}
	// 输入数据的函数
	const handleInputConfirm = async () => {
		if (inputValue.value) {
			dynamicTags.value.push(inputValue.value)
			const res = await setDepartment(JSON.stringify(toRaw(dynamicTags.value)))
			// console.log(res)
			if (res.status == 0) {
				ElMessage({
					message: '添加部门成功',
					type: 'success',
				})
			} else {
				ElMessage.error('添加部门失败')
			}
		}
		inputVisible.value = false
		inputValue.value = ''
	}
</script>

<style lang="scss" scoped>
	.common-wrapped {
		padding: 8px;
		background: #f5f5f5;
		// 计算 减去了头部还有面包屑
		height: calc(100vh - 101px);

		.common-content {
			padding: 0 10px;
			// height: 100%;
			background: #fff;

			// 账号信息外壳
			.account-infor-wrapped {
				display: flex;
				align-items: center;
				padding-left: 50px;
				margin-bottom: 24px;
				font-size: 14px;

				// 账号信息内容
				.account-infor-content {
					margin-left: 24px;
					margin-right: 16px;
				}

				// 按钮
				.account-save-button {
					margin-left: 16px;
				}
			}

			// 首页管理外壳
			.home-wrapped {
				padding-left: 50px;
				display: flex;
				flex-direction: column;

				// 提示
				.tips {
					display: flex;
					align-items: center;
					margin-bottom: 8px;


					span {
						font-size: 14px;
						color: silver;
					}
				}

				// 轮播图
				.swiper-wrapped {
					display: flex;
					margin-bottom: 16px;

					// 轮播图名字
					.swiper-name {
						font-size: 14px;
						margin-bottom: 24px;
					}

					.swiper {
						width: 336px;
						height: 96px;
					}
				}
			}
		}
	}

	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}

	/* 其他设置 */
	.other-set {
		padding-left: 50px;
		font-size: 14px;

		.department-set {
			margin-bottom: 24px;

			span {
				margin-right: 24px;
			}
		}
	}

	// 上传头像
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	// 输入框长度
	:deep(.el-input) {
		width: 240px;
	}

	:deep(.el-select) {
		width: 240px;
	}
</style>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>